<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('新增横幅')" />
	<th:block th:include="include :: jasny-bootstrap-css" />
</head>
<body class="white-bg">
    <div class="wrapper wrapper-content animated fadeInRight ibox-content">
        <form class="form-horizontal m" id="form-banner-edit" th:object="${banner}">
			<input id="noticeId" name="noticeId" th:field="*{bannerId}"  type="hidden">
			<div class="form-group">	
				<label class="col-sm-2 control-label is-required">横幅名称：</label>
				<div class="col-sm-10">
					<input id="bannerName" name="bannerName" class="form-control" type="text" th:field="*{bannerName}" required>
				</div>
			</div>
			<div class="form-group">
				<label class="col-sm-2 control-label is-required">横幅链接：</label>
				<div class="col-sm-10">
					<input id="bannerUrl" name="bannerUrl" class="form-control" type="text" th:field="*{bannerUrl}" required>
				</div>
			</div>
			<input type="hidden" id="imgPath" name="imgPath" th:field="*{imgPath}">
			<form id="uploadForm" enctype="multipart/form-data">
				<div class="form-group">
					<label class="col-sm-2 control-label font-noraml">图片上传</label>
					<br/>
					<div class="fileinput fileinput-new" data-provides="fileinput">
						<div class="fileinput-new thumbnail" style="width: 140px; height: 140px;">
							<img th:src="@{${banner.imgPath}}">
						</div>
						<div class="fileinput-preview fileinput-exists thumbnail" style="max-width: 200px; max-height: 150px;"></div>
						<div>
							<span class="btn btn-white btn-file"><span class="fileinput-new">选择图片</span><span class="fileinput-exists">更改</span><input id="file" type="file"></span>
							<a href="#" class="btn btn-white fileinput-exists" data-dismiss="fileinput">清除</a>
						</div>
					</div>
				</div>
			</form>
		</form>
	</div>
    <th:block th:include="include :: footer" />
	<th:block th:include="include :: jasny-bootstrap-js" />
    <script type="text/javascript">
        var prefix = ctx + "bsk/banner";

	    
	    // 上传文件
	    function updateFile() {
            var file = document.getElementById("file").files[0];
	        var data = new FormData();
	        data.append("file",file);
	        $.ajax({
	            type: "POST",
	            url: ctx + "banner/uploadBanner",
	            data: data,
	            cache: false,
	            contentType: false,
	            processData: false,
	            dataType: 'json',
	            success: function(result) {
	                if (result.code == web_status.SUCCESS) {
	                    $("#imgPath").val(result.data);
                        if ($.validate.form()) {
                            $.operate.save(prefix + "/edit", $('#form-banner-edit').serialize());
                        }
					} else {
						$.modal.alertError(result.msg);
					}
	            },
	            error: function(error) {
	                $.modal.alertWarning("图片上传失败。");
	            }
	        });
	    }
		
		$("#form-notice-edit").validate({
			focusCleanup: true
		});
		
		function submitHandler() {
            updateFile();
	    }
	</script>
</body>
</html>
